import React, { Component } from 'react';
import '../../assets/font_3864106_x4snsw96acr/iconfont.css'
import '../../styles/Home.scss'
import pic from '../../assets/1.jpg'
import *as service from '../../api/api'
import { withRouter } from 'react-router-dom';
class Home extends Component {
    constructor(props) {
        super(props)
        this.state = {
            header_info: [
                { num: '2345', name: '患者数' },
                { num: '2345', name: '预约数' },
                { num: '98%', name: '好评率' },
            ],
            content_info: [
                { name: '图文问诊', pic: 'icon-xiaoxi' },
                { name: '电话问诊', pic: 'icon-dianhua' },
                { name: '视频问诊', pic: 'icon-shipin' },
                { name: '开药问诊', pic: 'icon-yiyaoxiang' },
                { name: '挂号问诊', pic: 'icon-menzhenguahao' },
                { name: '快速处方', pic: 'icon-zu' },
                { name: '患者管理', pic: 'icon-huanzhe' },
            ],
            bottom_info: [
                // { title: '患者消息', pic, name: '李四', age: 18, sex: '女', wenzhengstatus: '极速问诊-视频', status: '待接诊', info: '最近一个月总是头晕，头痛，疲劳，心悸等，有时还会出现注意力不集中，记忆力减退，肢体麻木的现象' },
                // { title: '患者消息', pic, name: '李四', age: 18, sex: '女', wenzhengstatus: '极速问诊-视频', status: '待接诊', info: '最近一个月总是头晕，头痛，疲劳，心悸等，有时还会出现注意力不集中，记忆力减退，肢体麻木的现象' },
                // { title: '患者消息', pic, name: '李四', age: 18, sex: '女', wenzhengstatus: '极速问诊-视频', status: '待接诊', info: '最近一个月总是头晕，头痛，疲劳，心悸等，有时还会出现注意力不集中，记忆力减退，肢体麻木的现象' },
                // { title: '患者消息', pic, name: '李四', age: 18, sex: '女', wenzhengstatus: '极速问诊-视频', status: '待接诊', info: '最近一个月总是头晕，头痛，疲劳，心悸等，有时还会出现注意力不集中，记忆力减退，肢体麻木的现象' },
                // { title: '患者消息', pic, name: '李四', age: 18, sex: '女', wenzhengstatus: '极速问诊-视频', status: '待接诊', info: '最近一个月总是头晕，头痛，疲劳，心悸等，有时还会出现注意力不集中，记忆力减退，肢体麻木的现象' },
            ]

        }
    }
    async componentDidMount(){
        var res = await service.bottom_info({})
        console.log(res);
        this.setState({bottom_info:res.data})
    }

    listClick(index){
        if(index === 0 ){
            this.props.history.push('/imgt')
        }
        if(index === 1 ){
            this.props.history.push('/phone')
        }
        if(index === 2 ){
            this.props.history.push('/ship')
        }
        if(index === 3 ){
            this.props.history.push('/pm')
        }
        if(index === 4 ){
            this.props.history.push('/hhao')
        }
        console.log(index);
    }
    render() {
        return (
            <div className='home'>
                <div className="header">
                    <div className="top">
                        <span className="iconfont">&#xe62f;</span>
                    </div>
                    <div className="main">
                        <div className="m_left">
                            <img src={pic} alt="" />
                        </div>
                        <div className="m_center">
                            <div className="infomian">
                                <div className="shang">
                                    <span className='sps'>张三</span>
                                    <span className='sps'>主任医师</span>
                                    <span className='sps'>内科</span>
                                </div>
                                <div className="xia">
                                    <span className='spss'>北京协和医院</span>
                                </div>
                            </div>
                            <div className="right">
                                <span className="iconfont">&#xe65f;</span>
                            </div>
                        </div>
                    </div>
                    <div className="info">
                        {
                            this.state.header_info.map((item, index) => {
                                return (
                                    <div className="info_box" key={index}> 
                                        <span>{item.num}</span>
                                        <p>{item.name}</p>
                                    </div>
                                )
                            })
                        }
                    </div>
                </div>
                <div className="content" >
                    {
                        this.state.content_info.map((item, index) => {
                            return (
                                <div className="content_box" key={index} onClick={()=>{this.listClick(index)}}>
                                    <p><span className={'iconfont ' + item.pic}></span></p>
                                    <div className='pp'>{item.name}</div>
                                </div>
                            )
                        })
                    }
                </div>
                <div className="bottoms">
                    <div className="bottom">
                        <div className="bottom_top">
                            <span > 抢单区</span>
                            <span className='spleft'>更多&gt;</span>
                        </div>
                        <div className="bottom_main">
                            <div className="top">
                                <img src={pic} alt="" />
                                <span>李四</span>
                                <span className='span1'>男</span>
                                <span className='span1'>43</span>
                                <span className='span2'>极速问诊—电话</span>
                                <span className='span3'>￥39</span>
                            </div>
                            <div className="bom">
                                <p>病情描述:&emsp;<span>最近一个月总是头晕，头痛，疲劳，心悸等，有时还会出现注意力不集中，记忆力减退，肢体麻木的现象</span></p>
                            </div>
                            <div className="actived">
                                <p>今日已接单25单，剩余接诊数量5</p>
                                <button>抢单</button>
                            </div>
                        </div>
                    </div>
                    <div className="bottom1">
                        {
                            this.state.bottom_info.map((item, index) => {
                                return (
                                    <div className="bottom" key={index}>
                                        <div className="bottom_main">
                                            <div className="top">
                                                <img src={item.pic} alt="" />
                                                <span>{item.name}</span>
                                                <span className='span1'>{item.sex}</span>
                                                <span className='span1'>{item.age}</span>
                                                <span className='span2'>{item.wenzhengstatus}</span>
                                                <span className='span3'>{item.status}</span>
                                            </div>
                                            <div className="bom">
                                                <p>病情描述:&emsp;<span>{item.info}</span></p>
                                            </div>
                                        </div>
                                    </div>
                                )
                            })
                        }
                    </div>
                </div>
            </div>
        );
    }
}

export default withRouter(Home);